<script lang="ts" setup>
const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
});

const emits = defineEmits([ "update:modelValue" ]);

const form = ref({
  probability: 1,
  defaulted: 0,
  firstPrize: 0
});

const detail = computed({
  get: () => {
    let detail = Object.assign({}, form.value, props.modelValue);
    let keys = Object.keys(form.value);
    for (let i = 0; i < keys.length; i++) {
      if (props.modelValue[keys[i]] === undefined) {
        emits("update:modelValue", detail);
        break;
      }
    }
    return detail;
  },
  set: (val) => {
    emits("update:modelValue", val);
  },
});

const onChange = () => {
  detail.value = detail.value;
};
</script>
<template>
  <el-form-item
    label="中奖权重:"
    prop="probability"
    :rules="[{ required: true, message: '请填写中奖权重', trigger: 'blur' }]"
  >
    <EasyNumberInput
      v-model="detail.probability"
      :max="100"
      unit=""
      @change="onChange"
    />
  </el-form-item>
  <el-form-item
    label="默认奖品:"
    prop="defaulted"
  >
    <el-switch
      v-model="detail.defaulted"
      inline-prompt
      active-text="是"
      inactive-text="否"
      :active-value="1"
      :inactive-value="0"
      @change="onChange"
    />
  </el-form-item>
  <el-form-item prop="firstPrize">
    <template #label>
      <div class="audit-label">
        <span>首次必中</span>
        <el-popover
          placement="bottom"
          :width="200"
          trigger="hover"
          content="开启之后用户首次参与活动必中该奖品"
        >
          <template #reference>
            <span class="question-icon">?</span>
          </template>
        </el-popover>
      </div>
    </template>
    <div>
      <el-switch
        v-model="detail.firstPrize"
        active-text="开启"
        inactive-text="关闭"
        inline-prompt
        :active-value="1"
        :inactive-value="0"
        @change="onChange"
      />
    </div>
  </el-form-item>
</template>
<style lang="scss" scoped>
.audit-label {
  display: flex;
  align-items: center;
}

.question-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  font-size: 10px;
  color: var(--el-text-color-regular);
  border-radius: 50%;
  border: 1px solid var(--el-text-color-regular);
}
</style>